<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
    <title>Light Blue Documentation</title>
    <link href="css/documentation.css" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <meta charset="utf-8">
</head>
<body class="background-two">
<nav id="sidebar" class="sidebar">
    <ul id="side-nav" class="side-nav">
        <li class="green">
            <a href="index.html"><i class=" icon-desktop"></i> <span class="name">Dashboard</span></a>
        </li>
        <li class="active teal accordion-group">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#side-nav" href="#stats-collapse"><i class=" icon-bar-chart"></i> <span class="name">Statistics</span></a>
            <ul id="stats-collapse" class="accordion-body collapse in">
                <li><a href="stat_statistics.html">Stats</a></li>
                <li class="active"><a href="stat_charts.html">Charts</a></li>
                <li><a href="stat_realtime.html">Realtime</a></li>
            </ul>
        </li>
        <li class="blue accordion-group">
            <a class="accordion-toggle collapsed" data-toggle="collapse"
               data-parent="#side-nav" href="#forms-collapse"><i class=" icon-edit"></i> <span class="name">Forms</span></a>
            <ul id="forms-collapse" class="accordion-body collapse">
                <li><a href="form_account.html">Account</a></li>
                <li><a href="form_article.html">Article</a></li>
                <li><a href="form_elements.html">Elements</a></li>
                <li><a href="form_validation.html">Validation</a></li>
                <li><a href="form_wizard.html">Wizard</a></li>
            </ul>
        </li>
        <li class="brown accordion-group">
            <a class="accordion-toggle collapsed" data-toggle="collapse"
               data-parent="#side-nav" href="#ui-collapse"><i class=" icon-magic"></i> <span class="name">UI</span></a>
            <ul id="ui-collapse" class="accordion-body collapse">
                <li><a href="ui_buttons.html">Buttons</a></li>
                <li><a href="ui_dialogs.html">Dialogs</a></li>
                <li><a href="ui_icons.html">Icons</a></li>
                <li><a href="ui_tabs.html">Tabs</a></li>
                <li><a href="ui_accordion.html">Accordion</a></li>
            </ul>
        </li>
        <li class="dark-red accordion-group">
            <a class="accordion-toggle collapsed" data-toggle="collapse"
               data-parent="#side-nav" href="#components-collapse"><i class=" icon-bookmark-empty"></i> <span class="name">Components</span></a>
            <ul id="components-collapse" class="accordion-body collapse">
                <li><a href="component_calendar.html">Calendar</a></li>
                <li><a href="component_maps.html">Maps</a></li>
                <li><a href="component_gallery.html">Gallery</a></li>
                <li><a href="component_fileupload.html">Fileupload</a></li>
            </ul>
        </li>
        <li class="red accordion-group">
            <a class="accordion-toggle collapsed" data-toggle="collapse"
               data-parent="#side-nav" href="#tables-collapse"><i class=" icon-table"></i> <span class="name">Tables</span></a>
            <ul id="tables-collapse" class="accordion-body collapse">
                <li><a href="tables_static.html">Static</a></li>
                <li><a href="tables_dynamic.html">Dynamic</a></li>
            </ul>
        </li>
        <li class="orange">
            <a href="grid.html"><i class=" icon-columns"></i><span class="name">Grid</span></a>
        </li>
        <li class="lime accordion-group">
            <a class="accordion-toggle collapsed" data-toggle="collapse"
               data-parent="#side-nav" href="#special-collapse"><i class=" icon-asterisk"></i> <span class="name">Special</span></a>
            <ul id="special-collapse" class="accordion-body collapse">
                <li><a href="special_search.html">Search</a></li>
                <li><a href="login.html">Login</a></li>
                <li><a href="special_404.html">404</a></li>
            </ul>
        </li>
    </ul>
</nav>
<div class="wrap">
    <header class="page-header">
        <h1>Documentation</h1>
    </header>
    <div class="content container-fluid">
        <div class="row-fluid">
            <div class="span10 offset1">
                <section class="widget">
                    <h2>Charts</h2>
                    <p>All Light Blue charts are based on amazing <a href="http://d3js.org/">D3.js</a> library. Here is what D3
                    says about itself:</p>
                    <blockquote>
                        D3.js is a JavaScript library for manipulating documents based on data.
                        D3 helps you bring data to life using HTML, SVG and CSS. D3’s emphasis on web standards
                        gives you the full capabilities of modern browsers without tying yourself to a proprietary
                        framework, combining powerful visualization components and a data-driven approach to DOM manipulation.
                    </blockquote>
                    <p>So it means that graphs are drawn with standard SVG and styled with CSS. You can customize all you like with techniques you already know.</p>
                    <p>
                        There are two libraries used in <strong>Light Blue</strong> which work on top of D3.js:</p>
                    <ul>
                        <li><a href="http://nvd3.org/">nvd3</a> - which is focused on developing re-usable charts and chart components for d3.js without taking away the power that d3.js gives to developer, and</li>
                        <li><a href="http://code.shutterstock.com/rickshaw/">Rickshaw</a> - a JavaScript toolkit for creating interactive time series graphs based on d3.js underneath. Rickshaw is used for displaying
                            <a href="stat_realtime.html">realtime data</a> in Light Blue.</li>
                    </ul>
                </section>
            </div>
        </div>
        <div class="row-fluid">
            <div class="span10 offset1">
                <section class="widget">
                    <h3>Top sources</h3>
                    <p>Top sources is a <a href="http://nvd3.org/ghpages/pie.html">nvd3's pie chart</a> with a little
                        bit of custom code which can be simply reused (<a href="../js/stats.js">stats.js</a>).</p>
                    <p>It depends on following files:</p>
                    <pre>
lib/nvd3/nv.d3.custom.js
lib/nvd3/src/models/pie.js
lib/nvd3/src/models/legend.js
lib/nvd3/src/models/pieChartTotal.js</pre>
                </section>
            </div>
        </div>
        <div class="row-fluid">
            <div class="span10 offset1">
                <section class="widget">
                    <h3>Bar Chart</h3>
                    <p>Bar Chart is based on <a href="http://nvd3.org/ghpages/multiBar.html">nvd3's multi-bar chart</a>.</p>
                    <p>It depends on following files:</p>
                    <pre>
lib/nvd3/nv.d3.custom.js
lib/nvd3/src/models/axis.js
lib/nvd3/src/models/legend.js
lib/nvd3/src/models/multiBar.js
lib/nvd3/src/models/multiBarChart.js</pre>
                </section>
            </div>
        </div>
        <div class="row-fluid">
            <div class="span10 offset1">
                <section class="widget">
                    <h3>Stacked Chart</h3>
                    <p>Stacked Chart is based on <a href="http://nvd3.org/ghpages/stackedArea.html">nvd3's stacked area chart</a>.</p>
                    <p>It depends on following files:</p>
                    <pre>
lib/nvd3/nv.d3.custom.js
lib/nvd3/src/models/axis.js
lib/nvd3/src/models/legend.js
lib/nvd3/src/models/stackedArea.js
lib/nvd3/src/models/stackedAreaChart.js</pre>
                </section>
            </div>
        </div>
        <div class="row-fluid">
            <div class="span10 offset1">
                <section class="widget">
                    <h3>Line Chart</h3>
                    <p>Line Chart is based on <a href="http://nvd3.org/ghpages/stackedArea.html">nvd3's stacked area chart</a>.</p>
                    <p>It depends on following files:</p>
                    <pre>
lib/nvd3/nv.d3.custom.js
lib/nvd3/src/models/axis.js
lib/nvd3/src/models/legend.js
lib/nvd3/src/models/line.js
lib/nvd3/src/models/lineChart.js</pre>
                </section>
            </div>
        </div>
    </div>
</div>

<!-- jquery and friends -->
<script src="js/jquery.1.9.0.min.js"> </script>
<script src="js/jquery-migrate-1.1.0.min.js"> </script>
<script src="js/bootstrap-transition.js"></script>
<script src="js/bootstrap-collapse.js"></script>

</body>
</html>